<template>
    <div class="office-demand">
        <VptRankBar :chartData="rankData" autoRander v-bind="chartProps"></VptRankBar>
    </div>
</template>

<script setup>
import VptRankBar from '@/components/echarts/vpt-rankBar/index.vue';
import { computed } from 'vue';
import { fontSize } from '@/utils/rem/rem.js';

const props = defineProps({
    // 图表数据
    rankData: { type: Array, default: () => ([]) },
    // 是否为横屏
    isLandscape: { type: Boolean, default: false }
})

const chartProps = computed(() => {
    const otherProps = props.isLandscape ? getOtherRankProps() : {};

    return {
        titleProps: {
            text: '处室需求申请量排行TOP5'
        },
        grid: {
            left: 0,
            top: fontSize(60),
            right: fontSize(20),
            bottom: 0,
            containLabel: false
        },
        dataZoom: {
            show: false
        },
        ...otherProps
    }
})

const getOtherRankProps = () => {
    return {
        grid: {
            left: fontSize(5),
            top: fontSize(40),
            right: fontSize(20),
            bottom: 0,
            containLabel: false
        },
        titleFontSize: 14,
        labelFontSize: 14,
        valueFontSize: 14,
        valuePadding: [0, fontSize(10), fontSize(5), 0],
        labelPadding: [0, 0, fontSize(7), fontSize(10)],
        labelNamePadding: [0, 0, 0, fontSize(5)],
        iconWidth: 24,
        iconHeight: 16,
        barWidth: 8,
    }
}

</script>